<?xml version="1.0" encoding="UTF-8" ?>

<!-- 
One XSLT that use HTML + CSS to display the list of players showing, for each player, the name, the nick.-name, the club, the nationality, the number of scored goals, the number of games played, the number of times he played at initial time (“titular”) and some additional information if had consider important in your language. 
The XSLT should had 3 parameters: as in the first XSLT two parameters will be used to control the sort order and the third parameter will filter the displayed rows.
-->

<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xlink= "http://www.w3.org/1999/xlink" >


	<xsl:output method="html" indent="yes"/>
    
	<xsl:param name="columnSort">points</xsl:param>
	<xsl:param name="dataType">number</xsl:param>
	<xsl:param name="sortOrder">ascending</xsl:param>
	<xsl:param name="query"/>
	<xsl:param name="type" select="'html'"/>
	
	<xsl:param name="filter">filter</xsl:param>
	
	<xsl:template match="/">
	<xsl:choose>
        <xsl:when test="$type = 'html'">
		<html>
				<head>
					<title>XpertStats XML - Tabela Classificativa</title>
					<link href="css/bluedream.css" media="screen" rel="stylesheet" type="text/css" />
					<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
					<link rel="shortcut icon" href="images/logo.ico" />
					<link rel="icon" type="image/gif" href="images/logo.ico" />
                    
                    <script type="text/javascript">
						var columnSort = '<xsl:value-of select="$columnSort"/>';
						var sortOrder = '<xsl:value-of select="$sortOrder"/>';
						var dataType = '<xsl:value-of select="$dataType"/>';
					 	var query = '<xsl:value-of select="$query"/>';
                        var xslFile = "xslt/players_page.xslt";
                        var xmlFile = "players_data.xml";
					</script>
					<script type="text/javascript" src="js/XSLT-sort.js"/> 
				</head>
				<body>
					<div id="wrapper">
						<div id="header">
							<div id="header_content">
								<img src="./images/logo.png"/>
								<div style="float:right;margin-top:15px;">
                                        <form name="opsForm" action="">
                                            <input type="text" name="queryText" value="{$query}" />
                                            <input type="button" value="Search" onclick="javascript:queryGo(document.opsForm.queryText.value)"/>
                                            <input type="button" value="Clear" onclick="javascript:document.opsForm.queryText.value='';javascript:queryGo('')"/><br/>
                                        </form>
                                </div>
							</div>
						</div>  
						<div id="menuStrip">
							<ul class="menu">
								  <li><a href="stadiums_data.xml"><span>Stadiums</span></a></li>
								  <li><a href="teams_data.xml"><span>Teams</span></a></li>
								  <li><a href="players_data.xml" class="active"><span>Players</span></a></li>
								  <li><a href="fixtures_data.xml"><span>Fixtures</span></a></li>
							</ul>    
						</div>
			
            
                        <xsl:apply-templates select="players"/>                        
					   
				</div>
				<div id="footer">
					<div id="footerD">
						<div id="footerF" class="aligned">XpertStats XML - CTXML 2011 @ FCT-UNL</div>
						<div id="footerS" class="aligned">By: Ricardo Mestre &amp; Nuno Gomes</div>
					</div>
				</div>    
			</body>
		</html>
		</xsl:when>
           <xsl:otherwise>
                <xsl:apply-templates select="players"/>
            </xsl:otherwise>
        </xsl:choose>
	</xsl:template>


<xsl:template match="players">
    <div id="main" style="padding-top: 10px;">   
		<table border="1" width="100%" class="geral">
    		<thead>
    			<tr>
                <th style="text-align:center;">
                    <a href="javascript:sortColumn('name')">
					<xsl:attribute name="title">order by name</xsl:attribute>
                    Name</a></th>
                <th style="text-align:center;">
                    <a href="javascript:sortColumn('nickname')">
					<xsl:attribute name="title">order by nickname</xsl:attribute>
                    Nickname</a></th> 
                <th style="text-align:center;">
                    <a href="javascript:sortColumn('nationality')">
					<xsl:attribute name="title">order by nationality</xsl:attribute>
                    Nationality</a></th> 
               <th style="text-align:center;">
                    <a href="javascript:sortColumn('team')">
					<xsl:attribute name="title">order by team</xsl:attribute>
                    Team</a></th>
               <th style="text-align:center;">
                    <a href="javascript:sortColumn('position')">
					<xsl:attribute name="title">order by position</xsl:attribute>
                    Position</a></th>
               <th style="text-align:center;">
                    <a href="javascript:sortColumn('playerNumber')">
					<xsl:attribute name="title">order by shirt number</xsl:attribute>
                    Shirt</a></th>
               <th style="text-align:center;">
                    <a href="javascript:sortColumn('games')">
					<xsl:attribute name="title">order by games player</xsl:attribute>
                    Games</a></th>
               <th style="text-align:center;">
                    <a href="javascript:sortColumn('lineup')">
					<xsl:attribute name="title">order by initial lineup</xsl:attribute>
                    Lineups</a></th> 
               <th style="text-align:center;">
                    <a href="javascript:sortColumn('goalsScored')">
					<xsl:attribute name="title">order by goals</xsl:attribute>
                    Goals</a></th>
               <th style="text-align:center;">
                    <a href="javascript:sortColumn('cards')">
					<xsl:attribute name="title">order by cards</xsl:attribute>
                    Cards</a></th>    
               </tr> 
			</thead>
			<tbody>
      
      
        <xsl:for-each select="player[contains(descendant-or-self::*,$query)]">
        <xsl:sort 
         select="*[name(.)=$columnSort]|@*[name(.)=$columnSort]" 
          order="{$sortOrder}"  data-type="{$dataType}" />
        <xsl:variable name="currentPlayer" select="id"></xsl:variable>
		<tr>
			<td>
				<a href="javascript:viewPlayer('{$currentPlayer}')"><xsl:value-of select="name"/></a>
			</td>
			<td><xsl:value-of select="nickname"/></td>
			<td><xsl:value-of select="nationality"/></td>
			<td style="text-align:center">
				<a href="javascript:viewTeam('{team/@teamId}')">
				<img>
					<xsl:attribute name="src">images/teams/s<xsl:value-of select="substring-after(team/@teamId,'team_')"/>.png</xsl:attribute>
					<xsl:attribute name="border">0</xsl:attribute>
					<xsl:attribute name="title"><xsl:value-of select="team"/></xsl:attribute>
					<xsl:attribute name="alt"><xsl:value-of select="team"/></xsl:attribute>
				</img>
				</a>
			</td>
			<td><xsl:value-of select="position" /></td>
			<td style="text-align:center"><xsl:value-of select="playerNumber" /></td>
			<td style="text-align:center"><xsl:value-of select="games" /></td>
			<td style="text-align:center"><xsl:value-of select="lineup" /></td>
			<td style="text-align:center"><xsl:value-of select="goalsScored" /></td>
			<td style="text-align:center"><xsl:value-of select="cards" /></td>
		</tr>
      </xsl:for-each>
	
		</tbody>
</table>	
</div>
                    
                                                                                    
</xsl:template>

</xsl:stylesheet>

